<template>
	<div class="brs-tabs">
		<div class="brs-tabs-content" ref="brsTabsContentRef">
			<div class="item" :class="{ actived: currentMenu?.id === tab.id }" v-for="tab in tabs" @click="tabJump(tab)">
				<span class="text">{{ tab.name }}</span>
				<close-outlined @click.stop="delTab(tab)" :style="{ fontSize: '12px' }" v-if="tab.path !== '/deskboard'" />
			</div>
			<div class="actived-border"></div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { useMenuStore } from '@/store/menuStore';
	import { CloseOutlined } from '@ant-design/icons-vue';
	import { ref, watch, computed, nextTick } from 'vue';
	import { useRoute, useRouter } from 'vue-router';
	const route = useRoute();
	const router = useRouter();
	const menuStore = useMenuStore();

	const tabs = computed(() => menuStore.tabs);
	const currentMenu = computed(() => menuStore.currentMenu);

	const brsTabsContentRef = ref<HTMLDivElement>();

	const tabJump = (tab: ISystem.IMenu) => {
		router.push(tab.path);
	};

	const delTab = (tab: ISystem.IMenu) => {
		const current = menuStore.delTabs(tab);
		if (current) {
			router.push(current.path);
		}
		setActivedBorderStyle();
	};

	// 设置 活动border 的样式
	const setActivedBorderStyle = () => {
		nextTick(() => {
			// 当前选中的
			const element = document.querySelector('.brs-tabs .brs-tabs-content .item.actived') as HTMLDivElement;
			// 地下活动的border
			const activedBorderElement = document.querySelector('.brs-tabs .brs-tabs-content .actived-border') as HTMLDivElement;
			if (element && activedBorderElement) {
				const style = window.getComputedStyle(element);
				const paddingRight = Number(style.getPropertyValue('padding-right').replace('px', ''));
				const offsetLeft = element.offsetLeft + (element.clientWidth - paddingRight) / 2 - activedBorderElement.clientWidth / 2;
				activedBorderElement.style.transform = `translateX(${offsetLeft}px`;

				// 有滚动条的时候
				brsTabsContentRef.value?.scrollTo({
					left: element.offsetLeft - 20,
					top: 0,
					behavior: 'smooth',
				});
			}
		});
	};

	watch(
		() => route.path,
		() => {
			setActivedBorderStyle();
		},
		{ immediate: true }
	);
</script>

<style lang="less" scoped>
	.brs-tabs {
		display: flex;
		align-items: center;
		height: 100%;
		&-content {
			flex: 1;
			height: 100%;
			overflow-y: hidden;
			overflow-x: auto;
			display: flex;
			align-items: center;
			position: relative;
			margin: 0 20px;
			.item {
				flex: none;
				position: relative;
				margin-left: 20px;
				padding-right: 20px;
				.text {
					color: var(--ant-primary-10);
				}
				&:hover {
					cursor: pointer;
					.text {
						color: var(--ant-primary-color-hover);
					}
					.anticon {
						display: inline-block !important;
					}
				}
				.anticon {
					display: none !important;
					position: absolute;
					right: 0;
					top: 5.5px;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0;
					margin: 0;
					&:hover {
						color: var(--ant-error-color-hover);
						cursor: pointer;
					}
				}
				&.actived {
					.text {
						color: var(--ant-primary-color-active);
					}
				}
			}
			.actived-border {
				width: 20px;
				height: 4px;
				border-radius: 2px;
				background-color: var(--ant-primary-color-active);
				position: absolute;
				left: 0;
				bottom: 8px;
				transition: 0.3s all;
			}
		}
	}
</style>
